<template>
  <div class="container">
    <!-- header -->
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>物业服务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/RepairManagement' }">
          报修管理
        </el-breadcrumb-item>
      </el-breadcrumb>
      <h1>报修管理</h1>
    </div>
    <!-- search-box -->
    <div class="search-box">
      <el-form :model="searchData">
        <el-form-item label="住户类型">
          <el-select
            v-model="searchData.householdType"
            placeholder="请选择住户类型"
          >
            <el-option
              v-for="v in householdTypeOption"
              :label="v.label"
              :value="v.value"
              :key="v.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="报修状态">
          <el-select
            v-model="searchData.RepairStatus"
            placeholder="请选择报修状态"
          >
            <el-option
              v-for="v in RepairStatusOption"
              :label="v.label"
              :value="v.value"
              :key="v.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期" class="date">
          <el-date-picker
            v-model="searchData.date"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
            size="default"
          />
        </el-form-item>
        <el-form-item> </el-form-item>
        <el-form-item label="精确查询" class="exactQuery">
          <el-select
            disabled
            v-model="searchData.exactQuery"
            placeholder="请选择查询方式"
          >
            <el-option
              v-for="v in exactQueryOption"
              :label="v.label"
              :value="v.value"
              :key="v.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchData.exactQueryInput"
            placeholder="请输入"
            disabled
          />
        </el-form-item>
        <el-form-item class="search-btn">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <div>收起</div>
          <el-icon color="#1890ff"><ArrowUpBold /></el-icon>
        </el-form-item>
      </el-form>
    </div>

    <!-- list -->
    <div class="list">
      <div class="list-title">
        <div>报修列表</div>
        <div class="operation-box">
          <el-button type="primary" @click="newRepair">+ 新建</el-button>
          <el-button type="default">批量操作</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        stripe
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column property="id" type="selection" width="55" />
        <el-table-column property="houseForRepair" label="报修房屋" width="250">
        </el-table-column>
        <el-table-column
          property="maintenanceItems repairProject"
          label="维修项目"
          width="120"
          align="center"
        >
          <template #default="scope"
            >{{ scope.row.repairProject }}-{{
              scope.row.maintenanceItems
            }}</template
          >
        </el-table-column>
        <el-table-column property="title" label="标题" />
        <el-table-column property="repairer" label="报修人" />
        <el-table-column property="appointmentDate" label="预约日期">
          <template #default="scope">{{
            scope.row.appointmentDate.split(' ')[0]
          }}</template>
        </el-table-column>
        <el-table-column property="maintenanceStatus" label="维修状态">
          <template #default="scope"
            ><span
              style="color: #409eff"
              v-if="scope.row.maintenanceStatus == '审核中'"
              >{{ scope.row.maintenanceStatus }}</span
            >
            <span
              style="color: #00e676"
              v-if="scope.row.maintenanceStatus == '审核通过'"
              >{{ scope.row.maintenanceStatus }}</span
            >
            <span
              style="color: #f50057"
              v-if="scope.row.maintenanceStatus == '审核不通过'"
              >{{ scope.row.maintenanceStatus }}</span
            ></template
          >
        </el-table-column>
        <el-table-column label="操作" width="186">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              text
              @click="handleCheck(scope.row)"
              >审核</el-button
            >
            <el-button
              v-if="scope.row.maintenanceStatus == '审核中'"
              size="small"
              type="primary"
              text
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="primary"
              text
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="list-footer">
        <!-- page -->
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Page from '../../../components/Page.vue';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import axios from '../../../utils/http';
import { useRouter } from 'vue-router';
import useStore from '../../../store/index';
const store = useStore();
const router = useRouter();
let total = ref(0);
let count = ref(5);
let page = ref(1);
//搜索
let searchData = reactive({
  householdType: '',
  RepairStatus: '',
  date: [],
  exactQuery: '',
  exactQueryInput: '',
});
const householdTypeOption = [
  { label: '全部', value: '全部' },
  { label: '业主', value: '业主' },
  { label: '亲戚', value: '亲戚' },
  { label: '租户', value: '租户' },
  { label: '朋友', value: '朋友' },
];
const RepairStatusOption = [
  { label: '全部', value: '' },
  { label: '审核中', value: '7007' },
  { label: '审核通过', value: '7008' },
  { label: '审核不通过', value: '7009' },
];
const exactQueryOption = [
  { label: '住户姓名', value: '住户姓名' },
  { label: '手机号码', value: '手机号码' },
  { label: '证件号码', value: '证件号码' },
];
//日期快捷
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
interface User {
  id: number;
  houseForRepair: string;
  repairProject: string;
  maintenanceItems: string;
  title: string;
  repairer: string;
  appointmentDate: string;
  maintenanceStatus: string;
}
let tableData = ref<User[]>([]);

//渲染+搜索
const getData = () => {
  axios({
    url: '/repair/list',
    params: {
      params: {},
      page: page.value,
      limit: count.value,
      repairStateId:
        Number(searchData.RepairStatus) == 0
          ? ''
          : Number(searchData.RepairStatus),
      startTime: searchData.date[0],
      endTime: searchData.date[1],
      type: searchData.householdType,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      store.$state.tableData = data.data;
      total.value = data.total;
      let arr: User[] = [];
      data.data.forEach((v: any) => {
        arr.push({
          id: v.id,
          houseForRepair: v.house.room,
          repairProject: v.secondItem.repairProject.maintenanceItemType,
          maintenanceItems: v.secondItem.secondItemType,
          title: v.title,
          repairer: v.house.name,
          appointmentDate: v.orderDate,
          maintenanceStatus: v.repairState.repairState,
        });
      });
      tableData.value = arr;
    } else {
      ElMessage.error('加载失败！');
    }
  });
};

onMounted(() => {
  getData();
});
//分页
const handleSizeChange = (val: number) => {
  count.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  getData();
};
//搜索
const search = () => {
  console.log('submit!');
  getData();
};
//重置
const reset = () => {
  searchData.householdType = '';
  searchData.RepairStatus = '';
  searchData.date = [];
  searchData.exactQuery = '';
  searchData.exactQueryInput = '';
};
const newRepair = () => {
  router.push({ path: '/home/NewRepairRequest' });
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

//table
const cellStyle = ref({ height: '60px', fontSize: '15px' });
const headerStyle = ref({ height: '60px', fontSize: '15px', color: 'black' });
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const handleEdit = (row: User) => {
  console.log(row);
  router.push({
    path: '/home/NewRepairRequest',
  });
};
const handleCheck = (row: User) => {
  router.push({ path: '/home/DetailsOfRepair', params: { id: row.id } });
  console.log(row.id);
};
const handleDelete = (row: User) => {
  axios({
    url: '/repair/delete',
    method: 'delete',
    params: { id: row.id },
  }).then(({ data }) => {
    if (data.code == '0') {
      ElMessage.success('删除成功');
      getData();
    } else {
      ElMessage.error('删除失败');
    }
  });
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .header {
    width: 1136px;
    height: 97px;
    background: #fff;
    margin-top: 25px;
    border-bottom: 1px solid #f0f2f5;
    .el-breadcrumb {
      height: 37px;
      line-height: 37px;
      font-size: 14px;
      margin-left: 30px;
      :deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
        color: #aaadb4;
      }
    }
    h1 {
      height: 60px;
      line-height: 60px;
      margin-left: 30px;
      font-family: 'Microsoft Tai Le Bold', 'Microsoft Tai Le', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
    }
  }
  .search-box {
    width: 1136px;
    height: 193px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form {
      width: 95%;
      height: 193px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-around;
      .el-form-item {
        width: 300px;
        line-height: 32px;
      }
      .date {
        width: 520px;
      }
      .search-btn {
        width: 478px;
        :deep(.el-form-item__content) {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          div {
            color: #1890ff;
            margin-left: 15px;
          }
        }
      }
    }
  }
  .list {
    width: 1136px;
    background: #fff;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .list-title {
      width: 95%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
        line-height: 28px;
      }
    }

    .list-footer {
      width: 95%;
      height: 100px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
